<template>
	<view class="login-copy">
		<view class="header">
			<view class="logo">
				<u-image src="/static/images/logo.png" width="240rpx" height="268rpx" mode="widthFix"></u-image>
			</view>
			<view class="title">
				用户登录
			</view>
		</view>
		<view class="tabs">
			<view class="tabs-item">
				<u-subsection :list="list" mode="button" @change="tabchange"></u-subsection>
			</view>
		</view>
		<view class="middle">
			<!-- 那个参数rules不要都行 -->
			<u-form :model="form" ref="uForm" :errorType="errorType">
				<u-form-item prop="account" class="" :border-bottom="false">
					<u--input v-model="form.account" type="number" class=""
						:placeholder="togglelogin?'请输入手机号':'请输入手机号'"></u--input>
					<!-- <u-icon name="account-fill" size="40" class="icon"></u-icon> -->
				</u-form-item>
 
				<!-- 验证码登录 -->
				<u-form-item prop="mobilecaptcha" class="" :border-bottom="false" v-if="togglelogin">
					<view class="u-flex">
						<view class="u-flex-1">
							<u--input v-model="form.mobilecaptcha" type="number" class="input"
								placeholder="输入短信验证码"></u--input>
							<!-- <u-icon name="email-fill" size="40" class="icon"></u-icon> -->
						</view>
						<view class="wrap">
							<u-toast ref="uToast"></u-toast>
							<u-verification-code :seconds="seconds" ref="uCode" @change="codeChange">
							</u-verification-code>
							<u-button size="mini" @click="getTelCode"
								:hairLine="false" :text="tips"></u-button>
						</view>
					</view>
				</u-form-item>
 
				<!-- 这个是账号密码登录 -->
				<u-form-item v-else prop="password">
					<u-input v-model="form.password" type="password" border="border"
						:customStyle="{'padding-left':'2em','padding-top': '6rpx','padding-bottom': '6rpx'}"
						class="input" placeholder="输入密码" borderColo />
					<u-icon name="lock-fill" size="40" class="icon"></u-icon>
				</u-form-item>
				
				<u-form-item v-if="codeImg != '' && togglelogin==false" prop="captcha" class="inputarea"
					:border-bottom="false">
					<view class="u-flex">
						<view class="u-flex-1">
							<u-input placeholder="请输入验证码" v-model="form.captcha"
								type="number" class=""></u-input>
							<u-icon name="photo-fill" size="40" class="icon"></u-icon>
						</view>
						<image :src="codeImg" ref="codeImg" mode="widthFix" class="codeImg u-p-r-15" @click="getCode">
						</image>
					</view>
				</u-form-item>
			</u-form>
			<view class="botton">
				<u-button @click="submit" type="primary">登录</u-button>
			</view>
		</view>
		<!-- <view class="footer">
			<view class="tips">
				<view class="tipser">
					<u-checkbox v-model="agree" size="24"><text class="u-font-24 u-tips-color">我已知悉并同意</text></u-checkbox>
					<navigator class="text u-font-24" url="/pages/home/privacyPolicy/privacyPolicy">《隐私政策》</navigator>
				</view>
			</view>
			<view class="text u-tips-color u-font-24 u-p-t-10">v{{appVersion}}</view>
		</view> -->
		<slider-verify :isShow="sliderVerifyFLag" @touchSliderResult="verifyResult" @refresh="refresh" @close="close"
			:pintuImg="pintuImg" :pintukuai="pintukuai" :ynumber="ynumber" ref="verifyElement"></slider-verify>
		<!-- <u-modal
			v-model="show1" 
			:show-cancel-button="true" 
			title="隐私政策" 
			confirm-text="同意" 
			cancel-text="取消"
			width="600"
			@cancel="quit" 
			@confirm="loginIn">
			<view class="u-p-30 u-flex">
				<text>请先阅读并勾选同意</text>
				<navigator class="u-color-blue" url="/pages/home/privacyPolicy/privacyPolicy">隐私政策</navigator>
			</view>
		</u-modal> -->
		
		<!-- 选择登录账号 -->
		<u-popup v-model="selectLogin.show" mode="bottom" length="100%" closeable>
			<view class="u-p-60 u-p-t-80">
				<view class="u-p-b-30"><text class="u-font-34">选择站点登录</text></view>
				<!-- <view>
					<u-cell-group 
						class="u-m-b-20 u-m-t-10"
						>
						<u-cell-item 
							v-for="(res, index) in selectLogin.list" 
							:key="res.id" 
							:title="res.packstationname"
							:label="res.packstationstate"
							class="u-p-l-0 u-p-r-0" 
							@click="selectLoginAccount(res)">
						</u-cell-item>
					</u-cell-group>
				</view> -->
				
				<view class="stationList u-border-top">
					<view
						class="item u-border-bottom"
						v-for="(res, index) in selectLogin.list"
						:key="res.id"
						@click="selectLoginAccount(res)">
						<view class="u-flex">
							<view class="u-flex-1">
								<view class="name u-font-32">{{res.packstationname}}</view>
								<view v-if="res.staffstate == '已启用'" class="tip u-font-24">启用中</view>
								<view v-else class="tip u-font-24">已过期</view>
							</view>
							<u-icon name="arrow-right" color="#969799" size="28"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
			
	} from 'vuex';
	
	export default {
		data() {
			return {
				agree: true,
				list: [{
						name: '短信登录'
					}, {
						name: '密码登录'
					},
				],
				current: 1,
				countCodeImg: '', //验证码图片,
				// 这个是控制校验的
				issubmit: false,
				// 登录模式切换
				togglelogin: true,
				codeImg: '',
				tips: '',
				seconds: 60,
				errorType: ['toast'],
				form: {
					account: '',
					password: '',
					captcha: '',
					CaptchaGuid: '',
					mobilecaptcha: ''
				},
				rules: {
					account: [{
							required: true,
							message: '请输入手机号',
							trigger: ['blur'],
						},
						// {
						// 	validator: (rule, value, callback) => {
						// 		// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
						// 		return this.$u.test.mobile(value);
						// 	},
						// 	message: '手机号码不正确',
						// 	// 触发器可以同时用blur和change，二者之间用英文逗号隔开
						// 	trigger: ['blur'],
						// }
					],
					password: [{
							required: true,
							message: '请输入密码',
							trigger: ['blur'],
						},
						// {
						// 	// 正则不能含有两边的引号
						// 	pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]+\S{5,12}$/,
						// 	message: '需同时含有字母和数字，长度在6-12之间',
						// 	trigger: ['change','blur'],
						// }
					],
					mobilecaptcha: [{
							required: true,
							message: '请输入验证码',
							trigger: ['change', 'blur'],
						},
						{
							type: 'number',
							message: '验证码只能为数字',
							trigger: ['change', 'blur'],
						}
					],
					captcha: [{
							required: true,
							message: '请输入验证码',
							trigger: ['change', 'blur'],
						},
						{
							type: 'number',
							message: '验证码只能为数字',
							trigger: ['change', 'blur'],
						}
					]
				},
				// 这个一开始是密码登录，要传一个上去
				apiLink: '/Pack/Staff/SMSLogin',
				key: '',
				loginType: '',

				showCode: false,
				// 滑块验证参数
				sliderVerifyFLag: false,
				pintuImg: '',
				pintukuai: '',
				ynumber: 0,
				// 弹出隐私政策
				show: false,
				show1: false,
				// 选择登录账号
				selectLogin:{
					show: false,
					tempToken: '',
					list: [
						// {
						// 	packid: 1,
						// 	packstationname: "青猿1号店",
						// 	packstationstate: "试用中",
						// 	staffstate: "已启用"
						// },
						// {
						// 	packid: 2,
						// 	packstationname: "青猿2号店",
						// 	packstationstate: "试用中",
						// 	staffstate: "已启用"
						// }
					]
				}
			}
		},
		watch: {
			'form.mobilecaptcha'() {
				if (this.form.mobilecaptcha.length != 0 && this.form.account.length != 0) {
					this.issubmit = true
				} else {
					this.issubmit = false
				}
			},
			'form.account'() {
				if ((this.form.mobilecaptcha.length != 0 && this.form.account.length != 0) || (this.form.password.length != 0 && this.form.account.length != 0) ) {
					this.issubmit = true
				} else {
					this.issubmit = false
				}
			},
			'form.password'() {
				if (this.form.account.length != 0 && this.form.password.length != 0) {
					this.issubmit = true
				} else {
					this.issubmit = false
				}
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		computed: {
			...mapState({
				websetting: state => state.webSetting
			})
		},
		onLoad(opt) {
			uni.setNavigationBarColor({
				frontColor: "#ffffff",
				backgroundColor: "#464C5B"
			})
			
			this.key = opt.key;
			this.loginType = opt.loginType
			this.appVersion = uni.getSystemInfoSync().appVersion
		},
		methods: {
			
			tabchange(v) {
				console.log(v)
				// true为短信登录，false密码
				if (v == 0) {
					this.togglelogin = true;
					this.apiLink = '/Pack/Staff/SMSLogin'
				} else {
					this.togglelogin = false;
					this.apiLink = '/Pack/Staff/AccountLogin'
				}
				// this.$refs.uForm.resetFields()
			},
			// 获取滑块验证信息
			getSlideCaptch() {
				uni.showLoading({
					title: '加载中...'
				})
				this.$u.get('/Pack/SlideCaptcha/GetSlideCaptcha').then((res) => {
					this.pintuImg = res.src1
					this.pintukuai = res.src2
					this.ynumber = res.ynumber
					this.form.guid = res.guidid
					this.sliderVerifyFLag = true
					uni.hideLoading()
				}).catch((err)=>{
					uni.hideLoading()
				})
			},
			// 滑块验证结果回调函数
			verifyResult(oldx) {
				this.form.captcha = Math.round(oldx);
				//togglelogin参数true为短信登录滑块验证回调，false为密码登录滑块验证回调
				if(this.togglelogin){
					this.decideCode()
				}else{
					let form = {
						account: this.form.account,
						password: this.form.password,
						countresult: this.form.captcha,
						guid: this.form.guid
					}
					this.loginApi(form)
				}
			},
			// 关闭滑块验证弹窗
			close(state) {
				this.sliderVerifyFLag = state
			},
			// 刷新滑块验证
			refresh(state) {
				if (state) {
					this.getSlideCaptch();
				}
			},
			// 验证码确定
			decideCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在验证'
					})
					uni.$u.http.get('/Pack/Staff/SendLoginCaptcha?mobile=' + this.form.account + '&guid=' + this.form.guid +
						'&countresult=' + this.form.captcha).then((res) => {
						if (res) {
							this.sliderVerifyFLag = false;
							this.form.captcha = ""
							uni.hideLoading();
							// 这里此提示会被this.start()方法中的提示覆盖
							this.$u.toast('验证码已发送');
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode.start();
			
						} else {
							if(res.data.msg.err == '账号不存在'){
								this.sliderVerifyFLag = false;
							}else{
								this.getSlideCaptch();
							}
						}
					}).catch((res) => {
						if(res.data.msg.err == '账号不存在'){
							this.sliderVerifyFLag = false;
							return
						}
						this.$refs.verifyElement.refreshVerify();
						this.form.captcha = "";
					})
				}
			},
			
			submit() {
				// this.$refs.uForm.validate(valid => {
				// 	if (valid) {
				// 		if(!this.agree){
				// 			this.show1 =true
				// 			return
				// 		}
						uni.removeStorageSync('lifeData');
						this.submitdata()
				// 	} else {
				// 		return false;
				// 	}
				// });
			},
			// 弹出隐私政策弹出同意
			loginIn(){
				this.agree = true
				this.show = false
				if(this.togglelogin ){
					if(!this.form.account ){
						return
					}
					if( !this.form.mobilecaptcha ){
						return
					}
				}else{ 
					if(!this.form.account ){
						return
					}
					if(!this.form.password ){
						return
					}
				}
				this.submit()
			},
			quit(){
				this.show = false
				this.show1 = false
				this.agree = false
			},
			// 登录接口
			loginApi(form){
				let loginForm = form
				
				uni.showLoading({
					title: '验证中...'
				})
				uni.$u.http.post(this.apiLink, loginForm).then(res => {
					this.selectLogin.show = true
					this.selectLogin.list = res.joinpackstation
					this.selectLogin.tempToken = res.temptoken
					this.$u.vuex('joinpackstation', res.joinpackstation)
					// this.$u.vuex('Authorization', res.token.token.token)
					// this.$u.vuex('exp', res.token.token.exp)
					// this.$u.vuex('userdetail', res.token.userdetail)
					// this.$u.vuex('permissions', res.menus)
					// this.$u.vuex('isadmin', res.isadmin)
					// getApp().globalData.islogin = true
					
					// // this.$store.dispatch('signalrConnection')
					// uni.reLaunch({
					// 	url: '/pages/index/index'
					// })
				}).catch((error) => {
					this.sliderVerifyFLag = false;
					// this.$refs.verifyElement.refreshVerify();
				}).finally(()=>{
					uni.hideLoading()
				})
			},
			// 提交数据
			submitdata() {
				
				//togglelogin参数true为短信登录，false为密码登录
				let form = {}
				if(this.togglelogin){
					let form = {
						account: this.form.account,
						captcha: this.form.captcha,
						mobilecaptcha: this.form.mobilecaptcha,
						captchaguid: this.form.captchaguid
					}
					this.loginApi(form)
				}else{
					// 密码登录前先弹出滑动验证
					this.getSlideCaptch();
				}
			},
			// 点击获取验证码
			getTelCode() {
				if (this.form.account == '') {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
					return
				}
				if (this.$refs.uCode.canGetCode) {
					this.getSlideCaptch()
				}
			},

			codeChange(text) {
				this.tips = text;
			},
			// 选择登录站点
			selectLoginAccount(item){
				console.log(item)
				
				let param = {
					tempToken: this.selectLogin.tempToken,
					packId: item.packid
				}
				console.log('param',param)
				uni.$u.http.post('Pack/Staff/TempTokenLogin',param).then((res)=>{
					this.$u.vuex('Authorization', res.token)
					this.$u.vuex('permissions', res.menus)
					let userdetail = res.userdetail
					userdetail.currentpackid = item.packid
					this.$u.vuex('userdetail', res.userdetail)
					this.$u.vuex('isadmin', userdetail.isadmin)
					getApp().globalData.islogin = true
					
					// this.$store.dispatch('signalrConnection')
					uni.navigateTo({
						url: '/pages/index/index'
					})
				})
			}
		}
	}
</script>
<style scoped>
	.tabs>>>.u-subsection {
		border-radius: 40rpx !important;
		height: 60rpx !important;
	}

	.tabs>>>.u-item-text {
		font-size: 24rpx !important;
	}
</style>
<style lang="scss" scoped>
	.login-copy {

		min-height: 100vh;
		width: 100vw;
		background-color: white;
		padding: 40rpx 80rpx;
		border: 1px solid white;
		display: flex;
		flex-direction: column;

		.header {
			margin-top: calc(10rpx + 44px);
			padding-top: var(--status-bar-height);

			.logo {
				width: 240rpx;
				height: 268rpx;
				margin: 0 auto;
				// color: $u-type-error;

				// background-image: url("@/static/images/logo.png");
				// background-position: center;
				// background-size: cover;
				.iconfont {
					font-size: 140rpx;
				}
			}

			.title {
				font-size: 36rpx;
				text-align: center;
			}

			.title1 {
				font-size: 35rpx;
				margin-top: 20rpx;
				text-align: center;
			}
		}

		.tabs {
			margin: 50rpx 0rpx 30rpx 0rpx;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;

			.tabs-item {
				width: 400rpx;
				border: 1px solid #f4f4f5;
				border-radius: 40rpx;
			}
		}

		.middle {
			flex: 1;

			.inputarea {
				position: relative;

				.input {
					// text-indent: 2em;
					// padding-left: 3em!important;
				}

				.icon {
					position: absolute;

					top: 44rpx;
					left: 20rpx;
					color: $uni-color-grey;
				}

				.codeImg {
					// position: absolute;
					width: 120rpx;
					height: 50rpx;
					// top: 30rpx;
					// right: 10rpx;
				}

				.wrap {
					// position: absolute;
					// top: 20rpx;
					// left: 420rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					padding: 0;
					border: 0;
					background: inherit;
					z-index: 99;
					border-left: 1px solid $uni-color-light;
				}

				.u-flex {
					border: 1px solid #dcdfe6;
					width: 100%;
					border-radius: 8rpx;
					padding: 0 0 0 20rpx;
				}
			}

			.searchpassword {
				display: flex;
				align-items: center;
				justify-content: center;

				.searchpassword-item {
					display: flex;
					text-align: right;
					align-items: center;
					margin-top: 20rpx;
					margin-bottom: 20rpx;
					font-size: 24rpx;
					color: $uni-color-blue;

					.shu {
						width: 2rpx;
						height: 30rpx;
						background-color: #c8c9cc;
						margin: 0rpx 20rpx;
					}
				}

			}

			.botton {
				margin-top: 20rpx;
			}

			.toggle {
				text-align: center;
				font-size: 28rpx;
				color: $uni-color-blue;
				margin-top: 30rpx;
			}
		}

		.footer {
			text-align: center;
			color: $uni-color-grey;
			padding-bottom: 60rpx;
			padding-top: 30rpx;

			.ico {
				color: $uni-color-green;
			}

			.tips {
				display: flex;
				font-size: 24rpx;
				justify-content: center;
				align-items: baseline;
				margin-top: 40rpx;

				.tipser {
					.text {
						color: $uni-color-blue;
						display: inline-block;
					}
				}
			}
		}
	}
	
	.u-color-blue{
		color: $uni-color-blue;
	}
	.stationList{
		.item{
			padding: 26rpx 0;
		}
	}
</style>
